<template>
	<view class="codepages">
		<view class="code-top">
			<image src="../../../static/img/codedun.png"></image>
			<text>二维码已经过安全认证，请放心扫描</text>
		</view>
		<view class="code-nav">
			【限时开通免费付费题库】
		</view>
		
		<img :show-menu-by-longpress="true"  
				@click="previewImage" 
				class="code-img" 
				:src="service_image"></img>
		<view class="code-bom">
			请长按识别后开通题库
		</view>
		<view class="wxcode">
			<view style="display: flex;flex-direction: row;align-items: center;">
				<image style="width: 30rpx ;height: 30rpx ;border-radius:50px ;margin-right: 10rpx;" src="../../../static/img/pay1.jpg"></image>
				<text style="color: #9c9c9c;">添加学管师微信：</text>
				<text>&nbsp;{{service_wxcode}}</text>
			</view>
			
			
			<text @click="copy(service_wxcode)">点击复制</text>
		</view>
		
		<text class="qr-bom">
			打开微信——粘贴复制——添加好友
		</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//wxcode:'GongXue-kefu',
				service_wxcode:'',
				service_image:''
			}
		},
		onLoad(opts){ 
			this.service_wxcode=opts.service_wxcode
			this.service_image=opts.service_image
		},
		methods: {
			copy(value){
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
						     title: '复制成功'
						    })
					}
				})
			},
			previewImage(e){
			        uni.previewImage({
			            // 需要预览的图片链接列表。若无需预览，可以注释urls
			            urls: [e.target.src],
			            // 为当前显示图片的链接/索引值
			            current: e.target.src,
			            // 图片指示器样式 
			            indicator:'default',
			            // 是否可循环预览
			            loop:false,
			            // 长按图片显示操作菜单，如不填默认为保存相册
			   longPressActions:{
			    itemList:[this.l('发送给朋友'),this.l]
			   },
			   success: res => {
			    console.log('previewImage res', res);
			   }, 
			   fail: err => {
			    console.log('previewImage err', err);
			   }
			  });
			},
		}
	}
</script>

<style>
	
.codepages{
	display: flex;
	justify-content: center;
	flex-flow: column wrap;
}	
.code-top{
	width: 100%;
	height: 80rpx;
	background-color: #e4fde8;
	color:#56c76d ;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.code-top>image{
	width: 60rpx;
	height: 60rpx;
}
.code-top>text{
	font-size: 28rpx;
}
.code-nav{
	color: #bf3834;
	    margin: auto;
	    margin-top: 80rpx;
	    font-weight: 700;
		font-size: 27rpx;
}
.code-img{
			width: 450rpx;
		    
		    height: 450rpx;
		    margin: auto;
		    margin-top: 40rpx;
		    
		    
	}
.code-bom{
		color: #6b6b6b;
		    font-size: 23rpx;
		    
		    margin: auto;
		    
		    margin: 20px auto;
	}
.wxcode{
		    margin: auto;
		        display: flex;
		        justify-content: space-between;
		        align-items: center;
		        flex-direction: row;
		        width: 80%;
		        background: #d8d8d8;
		        height: 70rpx;
		        border-radius: 10rpx;
		        font-size: 25rpx;
		        padding: 0 30rpx;
			
	}
	.wxcode>text:nth-child(2){
			background-color: #dbf6fe;
			color: #65c4e2;
		    border-radius: 50rpx;
		    font-size: 20rpx;
		    padding: 5rpx 20rpx;
			margin-left: 20rpx;
	}
	.qr-bom{
			color: #9c9c9c;
		    font-size: 23rpx;
		    
		    margin: auto;
		    
		    margin: 20px auto;
	}

</style>
